<template>
    <edu-dialog v-drag-dialog title="组内用户明细" :visible.sync="visible" @close="close" :show-footer="false">
        <edu-table
            :pageSize="page.pageSize_"
            :total="page.total_"
            :page-num="page.pageNum_"
            @page-change="pageChange"
            :data="tableData"
            :selection="false"
        >
            <el-table-column label="账号">
                <template slot-scope="scope">
                    {{ scope.row.studentId }}
                </template>
            </el-table-column>
            <el-table-column label="用户名">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="联系电话" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row.phoneNumber }}
                </template>
            </el-table-column>
            <el-table-column label="联系邮箱" min-width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ scope.row.email }}
                </template>
            </el-table-column>
            <el-table-column label="类型">
                <template slot-scope="scope">
                    {{
                        scope.row.userType == '1'
                            ? '老师'
                            : scope.row.userType == '2'
                            ? '学生'
                            : '本地用户'
                    }}
                </template>
            </el-table-column>
        </edu-table>
    </edu-dialog>
</template>
<script>
    import { getUserInfoListByGroupId } from 'common/src/api/user'
    export default {
        name: 'approveGroup',
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            groupId :{
                type: String,
                default: ''
            }
        },
        data() {
            return {
                visiable: false,
                tableData: [],
                page: {
                    groupId: this.groupId,
                    userName: '',
                    pageNum_: 1,
                    total_: 0,
                    pageSize_: 20
                } 
            }
        },
        created() {
            this.getUserInfoListByGroupId();
        },
        methods: {
            async getUserInfoListByGroupId() {
                if (!this.groupId) {
                    this.$message({
                        type: 'error',
                        message: '查询出错, 请重试。'
                    })
                    return;
                }
                let {code, data} = await getUserInfoListByGroupId(this.page);
                if (code == 200) {
                    this.tableData = data &&  data.list || [];
                    this.page.total_ = data.total_;
                }
            },
            pageChange(val) {
                this.page.pageSize_ = val.pageSize;
                this.page.pageNum_ = val.pageNum;
                this.getUserInfoListByGroupId();
            },
            close() {
                this.$emit('update:visible', false);
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
